<template>
  <div>
    <div class='crumbs'>
      <el-breadcrumb separator='/'>
        <el-breadcrumb-item><i class='el-icon-message'></i> 受试者信息发布</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='container'>
      <!-- 搜索 -->
      <span>姓名：</span>
      <el-input
        placeholder="请输入搜索内容"
        v-model="input"
        style='width: 200px; margin-right: 15px'
      />
      <el-button
        type='primary'
        icon="el-icon-search"
        @click='searchSubmit'
      >搜索</el-button>
      <!-- 发布 -->
      <el-button
        v-allow="'excel'"
        type='success'
        icon="el-icon-plus"
        @click='showDialog = true'
        style='margin-left: 5%'
      >发布信息</el-button>
      <!-- 表格 -->
      <el-table
        :data='list.slice((currentPage-1)*pagesize,currentPage*pagesize)'
        border
        style='width: 100%; font-size: 15px; margin: 15px 0'
      >
        <el-table-column
          prop='BT'
          label='标题'
        ></el-table-column>
        <el-table-column
          prop='CREATEDATE'
          label='上传时间'
        ></el-table-column>
        <el-table-column
          prop='XMMS'
          label='项目描述'
        ></el-table-column>
        <el-table-column
          prop='RXBZ'
          label='入选标准'
        ></el-table-column>
        <el-table-column
          prop='PCBZ'
          label='排除标准'
        ></el-table-column>
        <el-table-column
          label='操作'
          width="200"
        >
          <template slot-scope="scope">&nbsp;
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="warning"
              @click="handleEdit(scope.$index,scope.row)"
            >编辑</el-button>&nbsp;
            <el-button
              type='danger'
              icon="el-icon-delete"
              size="mini"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
      >
      </el-pagination>
      <!-- 弹出层 -->
      <el-dialog
        :title="isEdit ? '编辑受试者信息' : '添加受试者信息'"
        :visible.sync="showDialog"
        width="37%"
        center
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        @close='closeFn'
      >
        <el-form
          ref='form'
          :model="form"
          :rules='rules'
          label-width="80px"
          label-position="right"
        >
          <el-form-item
            label="标题内容"
            prop='email'
          >
            <el-input
              v-model='form.BT'
              placeholder='请输入标题内容'
              style='width: 87%'
            ></el-input>
          </el-form-item>
          <el-form-item label="项目描述">
            <el-input
              v-model='form.XMMS'
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 7}"
              placeholder="请输入项目描述内容"
              style='width: 87%'
            />
          </el-form-item>
          <el-form-item label="入选标准">
            <el-input
              v-model='form.RXBZ'
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 7}"
              placeholder="请输入入选标准内容"
              style='width: 87%'
            />
          </el-form-item>
          <el-form-item label="排除标准">
            <el-input
              v-model='form.PCBZ'
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 7}"
              placeholder="请输入排除标准内容"
              style='width: 87%'
            />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="onSubmit()"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getSubjectAPI } from '@/api/index.js';
import { getSubjectSyncAPI } from '@/api/backStage.js';
import { data } from '@/utils/data';
export default {
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            ip: '',
            isEdit: false, // 是否为编辑状态
            showDialog: false, // 弹层显示
            input: '', // 搜索内容
            list: [], // 表格数据
            tableItemID: '',
            ID: '',
            form: {
                BT: '', // 标题
                XMMS: '', // 项目描述
                RXBZ: '', // 入选标准
                PCBZ: '' // 排除标准
            },
            rules: {
                // email: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
            }
        };
    },
    created() {
        this.ready();
        this.getSubjectData();
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        async getSubjectData() {
            const res = await getSubjectAPI({
                BT: 'null'
            });
            if (res.code == 'succ') {
                this.list = res.result;
            } else if (res.code == 'fail') {
                this.list = [];
            }
        },
        // 搜索
        async searchSubmit() {
            if (this.input != '') {
                const res = await getSubjectAPI({
                    BT: this.input
                });
                if (res.code == 'succ') {
                    this.list = res.result;
                    this.input = '';
                } else if (res.code == 'fail') {
                    this.list = [];
                    this.input = '';
                    this.$message.error(res.message);
                }
            } else {
                this.getSubjectData();
            }
        },
        // 编辑按钮
        handleEdit(index, row) {
            this.isEdit = true;
            this.showDialog = true;
            this.form = { ...row }; // 数据回填
            this.ID = row.ID;
            this.tableItemID = index;
        },
        // 编辑受试者信息
        async editInfo() {
            var editData = this.tableItemID;
            try {
                this.list[editData].BT = this.form.BT;
                this.list[editData].XMMS = this.form.XMMS;
                this.list[editData].RXBZ = this.form.RXBZ;
                this.list[editData].PCBZ = this.form.PCBZ;
                this.list[editData].CREATEDATE = this.form.CREATEDATE;
                const obj = {
                    ID: this.ID,
                    BT: this.form.BT,
                    XMMS: this.form.XMMS,
                    RXBZ: this.form.RXBZ,
                    PCBZ: this.form.PCBZ,
                    OPRID: this.$store.state.user.oprid,
                    IP: this.ip
                };
                const res = await getSubjectSyncAPI({
                    token: this.$store.state.user.token,
                    CZLX: 'update',
                    Params: obj
                });
                if (res.code == 'succ') {
                    this.$message.success('编辑成功');
                    this.getSubjectData();
                }
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        // 添加受试者信息
        async addInfo() {
            try {
                const obj = {
                    ID: '0',
                    BT: this.form.BT,
                    XMMS: this.form.XMMS,
                    RXBZ: this.form.RXBZ,
                    PCBZ: this.form.PCBZ,
                    OPRID: this.$store.state.user.oprid,
                    IP: this.ip
                };
                const res = await getSubjectSyncAPI({
                    token: this.$store.state.user.token,
                    CZLX: 'add',
                    Params: obj
                });
                if (res.code == 'succ') {
                    this.getSubjectData();
                    this.$message.success('发布成功');
                }
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        // 提交
        async onSubmit() {
            this.$refs.form.validate((value) => {
                if (value) {
                    this.isEdit ? this.editInfo() : this.addInfo();
                    this.showDialog = false;
                }
            });
        },
        // 删除
        handleDel(row) {
            this.$confirm('此操作将删除该内容, 是否继续?', '提示', {
                type: 'warning'
            }).then(async () => {
                // 1.传入id,发送请求
                const obj = {
                    ID: row.ID,
                    BT: row.BT,
                    XMMS: row.XMMS,
                    RXBZ: row.RXBZ,
                    PCBZ: row.PCBZ,
                    OPRID: this.$store.state.user.oprid,
                    IP: this.ip
                };
                const res = await getSubjectSyncAPI({
                    token: this.$store.state.user.token,
                    CZLX: 'del',
                    Params: obj
                });
                this.getSubjectData();
                // 2.若当前页最后一条数据被删除时,就去自动请求上一页数据
                // if (this.list.length === 1) {
                //     this.params.page = Math.max(--this.params.page, 1)
                // }
                // 3.重新渲染数据
                // this.getSubjectData()
                // 4. 提示信息
                this.$message.success('删除成功!');
            });
        },
        // 关闭弹窗的回调
        closeFn() {
            this.form = {
                title: '',
                describe: '',
                conform: '',
                exclude: ''
            };
            this.isEdit = false;
            this.$refs.form.resetFields();
        },
        // 分页
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        }
    }
};
</script>

<style scoped>
</style>
